<template lang="pug">
  .CreateAccountModal
    Modal(
      v-model="isShowCreateModal"
      :title="createModalTitle"
      class-name="vertical-center-modal"
      width="700"
    )
      Form.ivu-row.has-rules-item2.ivu-form-basic(ref="formData" :model="formData" :rules="rules" :label-width="180")
        FormItem.form-item.ivu-col(v-for="(item, index) of formItem" :label="item.label" :key="index" :class="item.style" :prop="item.prop")
          template(v-if="item.type === 'input'")
            Input(v-if="item.fn" v-model="formData[item.model]" :placeholder="item.placeholder" clearable)
            Input(v-else v-model="formData[item.model]" :placeholder="item.placeholder" clearable :type="item.inputType ? item.inputType: 'text'")
          template(v-if="item.type === 'select'")
            Select(v-model="formData[item.model]" :placeholder="item.placeholder" clearable filterable)
              Option(v-for="(c_item, c_index) of arrListDown[item.options]" :key="c_index" :value="c_item.value") {{c_item.label}}
          template(v-if="item.type === 'datePicker'")
            DatePicker.w-100(v-model="formData[item.model]" :placeholder="item.placeholder" :type="item.mode ? item.mode : 'date'")
          template(v-if="item.type === 'switch'")
            i-switch(v-model="formData[item.model]")
      
      .clearfix(slot="footer")
        Button(type="text" @click="cancel") 取消
        Button(v-if="modalKey != 'lookModal'" type="primary" @click="handleSubmit" :loading="!isCanSubmit") 保存
</template>

<script>
import { Common } from '@/utils/common.js'
import _cloneDeep from 'clone-deep'
import { SalesCustomerConfigApi } from '../SalesCustomerConfig.api.js';

export default {
  name: 'CreateModal',

  watch: {
  },

  computed: {
  },

  data () {
    return {
      isShowCreateModal: false,
      // isCreate: true,
      modalKey: null,
      createModalTitle: null,
      isCanSubmit: true,
      parentFormData: null,
      formData: {
        id: null,
        userId: null,
        customerCount: null,
        openUnDealThrow: null,
        unDealThrowDay: null,
        openDealThrow: null,
        dealThrowDay: null,
      },
      formItem: [
        { type: 'select', label: '姓名：', placeholder: '请选择姓名', prop: 'userId', model: 'userId', style: 'ivu-col-span-24', options: 'userArr' },
        { type: 'input', label: '可持有客户数上限：', placeholder: '请输入可持有客户数上限', prop: 'customerCount', model: 'customerCount', style: 'ivu-col-span-24' },
        { type: 'select', label: '未成交客户是否流入公海：', placeholder: '未成交客户是否流入公海', prop: 'openUnDealThrow', model: 'openUnDealThrow', style: 'ivu-col-span-24 is-required', options: 'booleanOps' },
        { type: 'input', label: '未成交客户流入公海天数：', placeholder: '未成交客户流入公海天数', prop: 'unDealThrowDay', model: 'unDealThrowDay', style: 'ivu-col-span-24' },
        { type: 'select', label: '已成交客户是否流入公海：', placeholder: '请选择已成交客户是否流入公海', prop: 'openDealThrow', model: 'openDealThrow', style: 'ivu-col-span-24', options: 'booleanOps' },
        { type: 'input', label: '已成交客户流入公海天数：', placeholder: '请输入已成交客户流入公海天数', prop: 'dealThrowDay', model: 'dealThrowDay', style: 'ivu-col-span-24' },
      ],
      rules: {
        userId: [
          { required: true, message: '请选择姓名', trigger: 'change' }
        ],
        customerCount: [
          { required: true, message: '请输入可持有客户数上限', trigger: 'change' }
        ],
      },
      arrListDown: {
        userArr: [],
        booleanOps: [{label: '是', value: 'true'}, {label: '否', value: 'false'}],
      },
    }
  },

  mounted () {
    this.getSelectList()
  },

  methods: {
    // 监听所有调用的方法
    listenCall (methodsWords, ...values) {
      this[methodsWords](...values)
    },

    cancel () {
      this.isShowCreateModal = false
    },

    show (parentRow) {
      console.log('⭐ parentRow: ', parentRow)
      this.isCanSubmit = true
      this.isShowCreateModal = true
      if (parentRow) {
        this.getModel(parentRow.id)
      }
    },

    getSelectList () {
      SalesCustomerConfigApi.GetSelectList().then(res => {
        console.log('res: ', res)
        if (res.data.success) {
          this.arrListDown.userArr = res.data.data.map(item => {
            return {
              label: item.name,
              value: item.id
            }
          })
        } else {
          this.$Message.error(res.data.message)
        }
      })
    },

    // 提交表单
    handleSubmit () {
      console.log('this.formData: ', this.formData)
      console.log('this.parentFormData: ', this.parentFormData)
      this.$refs.formData.validate((valid) => {
        if (valid) {
          this.isCanSubmit = false
          var params = {
            ...this.formData,
            userName: (this.arrListDown.userArr.find(item => {return item.value == this.formData.userId})).label
          }
          console.log('☆ params: ', params)
          SalesCustomerConfigApi.Save(params).then(resp=>{
            if (resp.data.success) {
              this.$Message.success(resp.data.message)
              this.isShowCreateModal = false
              this.$emit('query')
            } else {
              this.isCanSubmit = true
              this.$Message.error(resp.data.message)
            }
          })
        } else {
          this.isCanSubmit = true
          this.$Message.warning('输入有误，请返回检查!')
        }
      })
    },

    // 根据ID获取信息
    async getModel (id) {
      let resp = await SalesCustomerConfigApi.GetModel(id)
      console.log('resp: ', resp)
      if (resp.status === 200 && resp.data.success) {
        Object.keys(this.formData).forEach(key => {
          this.formData[key] = resp.data.data[key] + ''
        })
      } else {
        this.$Message.error({
          content: resp.data.message,
          duration: 10,
          closable: true
        })
      }
    },
  }
}
</script>

<style lang="less" scoped>

</style>
